import Link from "next/link";
// import Router from 'next/router'
import "../../static/style/pages/home.less";
import { Avatar, Image } from "antd";
import { useState } from "react";
import {
  GithubOutlined,
  MailFilled,
  WechatOutlined,
  ClockCircleOutlined,
  SmallDashOutlined,
} from "@ant-design/icons";
import { BiliIcon, JuejinIcon } from "../../static/icons";
import fallback from "../../static/icons/fallback";
import moment from "moment";
function HomeComponents({ newList }) {
  const [banner, setBanner] = useState("/static/images/headerbg.jpg");
  const [userInfo, setUserInfo] = useState({
    name: "游猫",
    avatar: "/static/images/yocat-avatar.jpg",
    slogan: "享你所想",
    email: "h02@yocat.cc",
    gitHub: "https://github.com/qwex888",
    bilibili: "https://space.bilibili.com/243166",
    juejin: "https://juejin.cn/user/4248168661266935",
  });
  const [hotList, setHotList] = useState([
    {
      id: "-33",
      title: "文章标题",
      createdTime: "2020-11-12 18:00:01",
      cover: "/static/images/headerbg.jpg",
    },
    {
      id: "-2",
      title: "文章标题2",
      createdTime: "2020-11-12 18:00:01",
      cover: "",
    },
    {
      id: "-1",
      title: "文章标题3",
      createdTime: "2020-11-12 18:00:01",
      cover: "/static/images/headerbg.jpg",
    },
  ]);
  const [newsListData, setNewsList] = useState(newList);
  // console.log(newList, 'newList')
  return (
    <div>
      <div id="banner">
        <div className="userinfo" style={{ backgroundImage: banner }}>
          <div className="user-box">
            <div className="user-avatar">
              <Avatar size={72} src={userInfo.avatar} />
            </div>
            <div className="user-slogan">{userInfo.slogan}</div>
            <div className="user-contact">
              <ul className="icons">
                <li className="icon-item">
                  <MailFilled />
                </li>
                <li className="icon-item">
                  <GithubOutlined />
                </li>
                <li className="icon-item">
                  <BiliIcon />
                </li>
                <li className="icon-item">
                  <WechatOutlined />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="mock-left"></div>
        <div className="mock-right"></div>
      </div>
      <main id="main">
        <div className="hots">
          <div className="home-block-title">聚焦</div>
          <ul className="hot-list">
            {hotList.map((el, index) => {
              return (
                <li className="hot-item" key={index}>
                  <Link href={"/post/" + el.id}>
                    <div>
                      <Image
                        className={"hot-img"}
                        src={el.cover ? el.cover : "error"}
                        fallback={fallback}
                      />
                      <div className="hot-postion">
                        {el.title}
                        <br />
                        {el.createdTime}
                      </div>
                    </div>
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
        <div className="recent">
          <div className="home-block-title">最新</div>
          <ul className="recent-list">
            {newsListData.map((el) => {
              return (
                <li className="recent-item" key={el.id}>
                  <div className="recent-postion"></div>
                  <div className="recent-cover">
                    <img src={el.cover} alt={el.title} />
                  </div>
                  <div className="recent-content">
                    <div className="recent-tit">
                      <Link href={"/post/" + el.id}>
                        <span className="recent-title">{el.title}</span>
                      </Link>
                      <span className="recent-time">
                        <ClockCircleOutlined />
                        {moment(el.createdAt).format("YYYY-MM-DD")}
                      </span>
                    </div>
                    <div className="recent-text">
                      {el.content.slice(0, 50) + "..."}
                    </div>
                  </div>
                  <Link href={"/post/" + el.id}>
                    <SmallDashOutlined className="recent-more" />
                  </Link>
                </li>
              );
            })}
          </ul>
          <div className="page">
            <div className="page-left">Prev</div>
            <div className="page-right">Next</div>
          </div>
        </div>
      </main>
    </div>
  );
}

export default HomeComponents;
